<template>
  <div ref="wrapper" class="wrapper">
    <div class="ele-seller">
      <div class="ele-seller-header seller-common">
        <div class="ele-top">
          <div class="ele-seller-title">
            <h1>{{ seller.name }}</h1>
             <div class="ele-follow"  @click="isFollow=!isFollow" >
               <span class="follow iconfont ele31guanzhu1xuanzhong" :class="[isFollow?'follow':'unfollow']"></span>
                <div>
                   <span class="follow-text" v-if="isFollow">已关注</span>
               <span class="follow-text" v-else>未关注</span>
                </div>
             </div>
          </div>
          <div class="ele-seller-star">
            <ele-star :score="seller.score"></ele-star>
            <span class="seller-rank">({{ seller.rankRate }}) </span>
            <span class="ele-sell-order">月售{{ seller.sellCount }} 单</span>
          </div>
        </div>
        <div class="ele-bottom">
          <div class="ele-send-info">
            <span class="send-text">起送价</span>
            <span class="send-money"
              >{{ seller.minPrice }}
              <span class="text">分钟</span>
            </span>
          </div>
          <div class="ele-send-info">
            <span class="send-text">商家配送</span>
            <span class="send-money"
              >{{ seller.deliveryPrice }}
              <span class="text">分钟</span>
            </span>
          </div>
          <div class="ele-send-info">
            <span class="send-text">平均配送时间</span>
            <span class="send-money"
              >{{ seller.deliveryTime }}
              <span class="text">分钟</span>
            </span>
          </div>
        </div>
        
      </div>
      <div class="ele-seller-middle seller-common">
        <div class="seller-middle">
          <div class="ele-seller-title ">
            <h1>公告与活动</h1>
          </div>
          <div class="ele-seller-notice">
            <p class="notice">{{ seller.bulletin }}</p>
          </div>
          <div class="ele-seller-evaluate">
            <ele-discount-info
              :discountInfo="data"
              v-for="data in seller.supports"
              @hook:mounted="Refresh"
              class="seller-evaluate"
            ></ele-discount-info>
          </div>
        </div>
      </div>
      <div class="ele-seller-view seller-common">
        <div class="seller-view">
          <div class="ele-seller-title ">商家实景</div>
          <div ref="rowrapper">
            <div class="ele-seller-image">
              <div
                class="seller-image"
                v-for="(value, index) in seller.pics"
              >
                <img :src="value" alt="情景图" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 商家 信息 -->
      <div class="ele-seller-message">
        <div class="seller-message">
          <h1 class="ele-seller-title">商家信息</h1>
          <div class="message">
            <div class="message-item" v-for="value in seller.infos">
              <span>{{ value }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { seller } from "@/config/api";
import { eleDiscountInfo } from "../index";
import { _InitScroll } from "@/common/js/better-scroll";
import { commonUtils } from "@/common/js/utils";
// star 组件
import eleStar from "@/components/stars";

export default {
  mixins: [commonUtils],
  data() {
    return {
      seller: {},
      BsApp: {},
      isFollow:false
    };
  },
  methods: {
    Init() {
      this.__InitWrapper(this.$refs.wrapper,0);
      this.BsApp = new _InitScroll(this.$refs.wrapper);
    },
    Refresh() {
      this.BsApp.refresh();
    },
    _InitRoWrapperHeight(ele) {
      let elGroup = ele.children[0];
      let width = 0;
      elGroup.children.forEach((Item) => {
        width += Item.offsetWidth + 6;
      });
      elGroup.style.width = width + "px";
    },
  },
  created() {
    // 网络请求
    seller().then((res) => {
      this.seller = res.data;
    });
    this.$nextTick(() => {
      this.Init();
    });
  },

  updated() {
    this.Refresh();
    this._InitRoWrapperHeight(this.$refs.rowrapper);
    new _InitScroll(this.$refs.rowrapper, {
      pullUpLoad: true,
      scrollbar: false,
      pullDownRefresh: true,
      scrollX: true,
      scrollY: false,
      click: true,
    });
  },
  components: {
    eleStar,
    // 折扣信息
    eleDiscountInfo,
  },
};
</script>

<style>
.wrapper {
  overflow: hidden;
}
.ele-seller{
  padding-bottom: 48px;
}
.ele-seller-header {
  /* padding: 0 18px; */
  position: relative;
}
.seller-common {
  margin-bottom: 18px;
  position: relative;
}
.seller-common::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 18px;
  transform: translateY(100%);
  background-color: rgba(7, 17, 27, 0.1);
  border-top: 1px solid rgba(7, 17, 27, 0.2);
  border-bottom: 1px solid rgba(7, 17, 27, 0.2);
}

.ele-top {
  margin: 0 18px;
  padding: 18px 0;
  position: relative;
}

.ele-bottom {
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
}
.ele-follow{
 text-align: center;
  position: absolute;
  right: 10px;
  cursor: pointer;
}
.follow{
  color: #E57373;
  font-size: 24px;
}
.unfollow{
  color: rgb(112, 113, 114);
  font-size: 24px;
}
.follow-text{
  color: rgb(77, 85 , 93);
  font-size: 10px;
  line-height: 10px;
}
.ele-top::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.7);
  background-color: rgba(7, 17, 27, 0.1);
}

.ele-seller-title {
  font-size: 14px;
  line-height: 14px;
  color: rgb(7, 17, 27);
}

.ele-seller-star {
  margin-top: 8px;
}

.ele-seller-star .ele-stars-item {
  height: 14px;
  width: 14px;
  margin-right: 4px;
}

.seller-rank {
  color: rgb(77, 85, 93);
}

.ele-sell-order {
  margin-right: 12px;
  font-size: 12px;
  line-height: 18px;
  color: rgb(77, 85, 93);
}

.ele-bottom div {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.ele-bottom div:last-child::after {
  display: none;
}

.ele-bottom div::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: rgba(7, 17, 27, 0.1);
}

.send-text {
  font-size: 10px;
  color: rgb(147, 153, 159);
  line-height: 10px;
}

.send-money {
  margin-top: 4px;
  font-size: 24px;
  color: rgb(7, 17, 27);
  line-height: 24px;
  font-weight: 100;
}

.text {
  font-size: 10px;
}

.ele-seller-middle {
  position: relative;
}
.seller-middle {
  overflow: visible;
  padding: 18px 18px;
}
.ele-seller-notice {
  padding: 8px 12px 16px 12px;
}

.notice {
  font-size: 12px;
  font-weight: 200;
  color: rgb(240, 20, 20);
  line-height: 24px;
}

.ele-seller-evaluate .ele-discount-text {
  color: rgb(7, 17, 27);
  font-size: 12px;
  line-height: 16px;
}
.seller-evaluate {
  border-top: 1px solid rgba(7, 17, 27, 0.1);
  padding: 16px 12px;
}
.seller-view {
  padding: 18px 18px;
}
.seller-image {
  width: 120px;
  height: 90px;
  margin-right: 6px;
}
.seller-image img {
  height: 100%;
  width: 100%;
}
.ele-seller-image {
  margin-top: 12px;
  overflow: hidden;
}
.seller-image {
  float: left;
}
.message {
  margin-top: 12px;
}
.seller-message {
  padding: 18px 18px;
}
.message-item {
  padding: 16px 12px;
  font-size: 12px;
  line-height: 16px;
  color: rgb(7, 17, 27);
  position: relative;
}
.message-item::before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(7, 17, 27, 0.1);
}
</style>
